<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <input id="hiddenText" type="text" style="display:none" />
        <el-form-item label="关键字：">
          <el-input v-model.trim="listQuery.keyword" class="input-width" style="width:300px" placeholder="公司名称/手机号,最少输入4个字符" clearable  @keydown.enter.native="keywordSearch()">
          </el-input>
        </el-form-item>
        <el-form-item label="统一社会信用码：" label-width="150">
          <el-input v-model="listQuery.businessCode" clearable class="input-width" style="width:195px"></el-input>
        </el-form-item>
<!--        <el-form-item label="客户编号：" >-->
<!--          <el-input v-model="listQuery.customerNumber" clearable class="input-width" style="width:195px"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
   <div class="table-container">
          <el-table
                  v-loading="listLoading"
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 20px">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column  align="center" label="ID" prop="customerId" width="80"></el-table-column>
            <el-table-column label="公司名称">
              <template slot-scope="scope">
                <span>
                  <el-link @click="toDetail(scope.row)" type="primary"  style="font-size:12px" v-if="!scope.row.charge.userId">
                    {{scope.row.customerName}}
                  </el-link>
                  <span v-else>
                    {{scope.row.customerName}}
                  </span>

                </span>
              </template>
            </el-table-column>
            <el-table-column
                    label="负责人"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.charge.realName}}
              </template>
            </el-table-column>
            <el-table-column
                    label="创建日期"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.createdAt}}
              </template>
            </el-table-column>
            <el-table-column
                    label="创建人"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.creator.realName}}
              </template>
            </el-table-column>
            <el-table-column
                    label="最近跟进日期"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.lastTrackingTime}}
              </template>
            </el-table-column>
            <el-table-column
                    label="最新成交日期"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.lastOrderTime}}
              </template>
            </el-table-column>
            <el-table-column
                    label="最新成交业务员"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.lastOrderUserName}}
              </template>
            </el-table-column>
            <el-table-column
                    label="客户类别"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.typeList | fifTypeList}}
              </template>
            </el-table-column>
          </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>




  </div>
</template>
<script>
import {
  partnerList,
} from '@/api/partner';
import { mapGetters } from 'vuex';
import store from '@/store';
import { formatDate } from '@/utils/date';
import { getStaffsList } from '@/api/management';
import { getToken } from '@/utils/auth';
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  businessCode: '',
  tab: 'repeatList',
  hasOne: 1,
  customerNumber:''


  // chargeId:'',
  // createrId:'',
  // customerState:null,
  // customerType:null,
  // customerSource:null,
  // customerQuality:null,
  // customerDegree:null,
  // customerTracking:null,
  // transactionTime:null,
  // trackingTime:'',
  // createdAt:'',
  // updatedAt:'',
  // isChina:'',
  // departmentId:null,
  // customerGrade:null,
  // customerLabel:null,
  // diQuIds:[],
  // hasBusinessCode:'',
  // customerPotential:[],
  // typeList:[],
  // customerName:'',
  // profitType:'',
  // lastOrderTime:[],
  // categoryName:'',
  // goodsName:'',
  // trackingContent:'',
  // goodsLineId:''
};
export default {
  name: "cmsRepeatList",
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading:false,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    isCanCustomerByImport(){
      if(this.roles.indexOf("customerByImport") != -1){
          return true
      }else{
          return false
      }
    },
  },
  created() {
  },
  filters: {
    fifTypeList(val){
      if(val == 'isBlackList'){
        return  '黑名单'
      }else if(val == 'isDelete'){
        return  '回收站'
      }else if(val == 'noCharge'){
        return  '公海'
      }else if(val == 'normal'){
        return  '正常'
      }else if(val == 'isBlackListApply'){
        return  '黑名单待审'
      }else if(val == 'isDeleteApply'){
        return  '回收站待审'
      }else if(val == 'outNoCharge'){
        return  '领取客户待审'
      }else if(val == 'moveCharge'){
        return  '转移客户待审核'
      }
    },
  },
  components : {
  },
  methods: {
    toDetail(item){
      let routeData = this.$router.resolve({name:'customerDetail',query:{id:item.customerId}});
      window.open(routeData.href);
    },
    //客户查询
    keywordSearch() {
      console.log(this.listQuery.customerNumber)
      if((this.listQuery.keyword.length >0 && this.listQuery.keyword.length < 4) || (this.listQuery.keyword.length == 0 && (this.listQuery.businessCode == '' || this.listQuery.businessCode == null || this.listQuery.customerNumber == '' || this.listQuery.customerNumber == null)) ){
        this.$message({
          type: 'error',
          message: '关键字最少输入4个字符!'
        });
        return false
      }
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getUserList();
    },

    init(tab){
      this.listQuery.tab = tab;
    },

    //获取客户列表
    getUserList() {
      if (this.listQuery.keyword.length >= 4 || this.listQuery.businessCode != '' || this.listQuery.customerNumber != '') {
        this.listLoading = true;
        partnerList(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      }else {
        this.$message({
          type: 'error',
          message: '最少输入4个字符!'
        });
      }
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getUserList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getUserList();
    },


  },
}
</script>
<style scoped lang="scss">
.upload-div{
    text-align: center;
    position:relative;
    #upload{
      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>



